<template>
  <div class="view-container">
    <el-table class="border-table" :data="tableData" :height="'300px'">
      <el-table-column
        v-for="(item, index) in thArr"
        :key="index"
        :prop="item.prop"
        :label="item.label">
        <template slot-scope="scope">
          {{scope.row[item.prop]}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    viewFile: {
      type: Array,
      default: function () { return []; }
    }
  },
  data () {
    return {
      tableData: [],
      thArr: [],
    }
  },
  watch: {
    viewFile (newValue) {
      const viewFile = newValue || [];
      let tableData = [];
      let thArr = [];
      if (viewFile.length > 0) {
        thArr = viewFile[0];
        tableData = viewFile.slice(1);
        thArr = thArr.map(item => {
          return {
            prop: item,
            label: item
          };
        });
        tableData = tableData.map(item => {
          const row = {};
          thArr.forEach((th, thIndex) => {
            row[th.prop] = item[thIndex];
          });
          return row;
        });
      }
      this.thArr = thArr;
      this.tableData = tableData;
    }
  }
}
</script>
<style lang="less" scoped>
.view-container {
  //width: 512px;
  max-width: 512px;
}
</style>
